<template>
  <div @click="clickHandle('test click', $event)">

    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <block v-for="(item, key, index) in slideshow" :index="index" :key="key">
          <swiper-item>
              <image :src="item.url" class="slide-image"/>
          </swiper-item>
      </block>
    </swiper>

    <div class="func">
      <div class="func-row">
        <block v-for="(item, key, index) in funcs" :index="index" :key="key">
          <mview v-bind:item="item">
          </mview>
        </block>
      </div>
    </div>
  
  </div>
</template>

<script>
import index from '@/utils/index/index'
import MView from '@/components/mview'
export default {
  data () {
    return {
      funcs: index.funcs,
      slideshow: [
        {url: 'https://scuplus.oss-cn-shenzhen.aliyuncs.com/notice/card.jpg'},
        {url: 'http://scuplus-1251451068.coscd.myqcloud.com/notice/new.jpg'}
      ]
    }
  },

  components: {
    mview: MView
  },

  methods: {
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
  }
}
</script>

<style scoped lang="less">
.swiper {
  width: 100%;
  z-index: 99;
  top: 0;
  swiper-item {
    width: 100%;
  }
  image {
    z-index: 30;
    width: 100%;
  }
}
.func {
  background: #fff;
  margin: 20rpx;
  margin-top: -40rpx;
  position: relative;
  border-radius: 10rpx;
  box-shadow: 0rpx 4rpx 10rpx #ddd;
  z-index: 999;
  .func-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .login {
      &.no-verify {
        .iconfont {
          background: #ccc !important;
        }
      }
    }
  }
}
</style>
